<template>
	{{style.canvasWidth}}{{style.canvasHeight}}
	<view class="showdiv" id="showdiv">
		<scroll-view >
			<canvas :style="{width:style.canvasWidth,height:style.canvasHeight}" canvas-id="canvas_ruler" id="canvas_ruler"></canvas>
			<canvas :style="{width:style.canvasWidth,height:style.canvasHeight}" canvas-id="canvas-cursor" id="canvas-cursor"></canvas>
		</scroll-view>
	</view>
</template>

<script>
	//最大值 最小值 间隔 默认值 事件
	export default {
		name:"slider",
		props:{
			minvalue: {
				//最小值
			    type: Number,
			    required: true,  
			    validator: function (value) {
					return value>0
			    }
			}, 
			maxvalue: {
			    //最大值
				type: Number,
			    required: true,
			    validator: function (value) {
			       return value>0
			    }
			},
			interval:{
				//间隔
				type: Number,
				required: true,
				validator: function (value) {
				    return value>0
				} 
			}, 
			defaultvalue:{
				//默认值
				type: Number,
				required: true,
				validator: function (value) {
					return value>0
				}
			}
		},
		data() { 
			return {
				canvasHeight:80,
				// canvasWidth:0,
				heightDecimal:50,
				heightDigit:25,
				fontSize:20,
				ratio:10,
				screenWidth:0,
				screenHeight:0,
			};
		}, 
		computed:{ 
			canvasWidth(){
				let value = this.maxvalue * this.ratio + this.screenWidth - this.minvalue * this.ratio;
				return value;
			},
			origion(){
				let x = this.screenWidth/2
				// let y = this.canvasHeight
				let y = 0
				let value = {x:x,y:y}
				return value;
			},
			style(){
				let value ={
					canvasHeight:this.canvasHeight+"px",
					canvasWidth:this.canvasWidth+"px"
				}
				return value
			}
		},
		methods:{
			getScreenSize() {
				uni.getSystemInfo({
				  success: (res) => {
					this.screenWidth = res.windowWidth; // 屏幕宽度，单位为px
					this.screenHeight = res.windowHeight; // 屏幕高度，单位为px
				  },
				});
			},
			drowruler(){
				var contextobj = uni.createCanvasContext('canvas_ruler')
				var context = contextobj.getContext('2d');
				let i = this.minvalue
				while(i < this.maxvalue){
					context.beginPath()
					let movetoX=this.origion.x + (i - this.minvalue) * this.ratio
					let movetoY=0
					context.moveTo(movetoX, movetoY);
					let linetoX  = this.origion.x + (i - this.minvalue) * this.ratio
					let linetoY = (i % this.ratio == 0 ? this.heightDecimal : this.heightDigit)
					context.lineTo(linetoX ,linetoY )
					context.setLineWidth(2)
					context.setStrokeStyle(i % this.ratio == 0 ? '#FFA500' : '#FF8C00')
					context.stroke()
					context.setFillStyle('gray') 
					if (i % this.ratio == 0) {
						context.setFontSize(this.fontSize);
						context.fillText(i == 0 ? ' ' + i : i, this.origion.x + (i - this.minvalue) * this.ratio - this.fontSize / 2, this.heightDecimal + 5 + this.fontSize)
					}
					context.closePath()
					context.draw(true)
					i+=this.interval
				}
			},
			drowcursor(){
				
			},
			drowtest(){
				var context = uni.createCanvasContext('canvas_ruler',this)
				// var context = contextobj.getContext('2d');
				context.beginPath()
				context.moveTo(10, 0)
				context.lineTo(10 ,50)
				context.setLineWidth(20)
				context.setStrokeStyle('#FFA500')
				context.stroke()
				
				context.draw()
				console.log('qwe');
			},
			check(){
				if(this.minvalue>=this.maxvalue){
					throw new Error("minvalue or maxvalue error")
				}
				if(this.defaultvalue>this.maxvalue||this.defaultvalue<this.minvalue){
					throw new Error("defaultvalue error")
				}
				if(this.interval>this.maxvalue){
					throw new Error("interval error")
				}
			},
			init(){
				this.check()
				this.getScreenSize()
			},
			canvasIdErrorCallback: function (e) {
				console.error(e.detail.errMsg)
			}
		},
		mounted(){
			this.init()
			console.log(123)
			this.drowtest()
		}// ,
		// onReady(e){
		// 	// this.drowruler()
		// 	console.log(123)
		// 	this.drowtest()
		// }
	}
</script>

<style scoped>
.showdiv{
	position: relative;
	width: 100%;
}
.showdiv #canvas_ruler{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}
.showdiv #canvas-cursor{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
}
</style>